<template>
	<m-layout title="记录" gap="30">
		<m-block gap="0 24">
			<template v-for="(item, index) in listArr">
				<view class="li">
					<view class="head flex-between">
						<text>回购数量</text>
						<text>{{ item.amount }}</text>
					</view>
					<view class="flex-between ai-baseline">
						<text style="white-space: nowrap;">回购价格：</text>
						<text>{{ item.dayprice}} CNY</text>
					</view>
					<view class="flex-between">
						<text>获得个人账户：</text>
						<text>{{ item.aamount }}</text>
					</view>
					<view class="flex-between">
						<text>获得购物券：</text>
						<text>{{ item.bamount }}</text>
					</view>
					<view class=" flex-between">
						<text>时间：</text>
						<text>{{ item.ctime.replace("T"," ") }}</text>
					</view>
				</view>
			</template>
		</m-block>

		<m-loading :list="listArr" :index="pageIndex" :total="pageCount" :loading="isLoading" />
	</m-layout>
</template>

<script>
	import { mapState } from 'vuex';
	import { GetBuyBackRecored } from '@/api/Trade.js';
	export default {
		data() {
			return {
				listArr: [],
				pageIndex: 1,
				pageSize: 10,
				pageCount: 1,
				isLoading: false
			};
		},
		computed: {
			...mapState({
				coinConfig: state => state.general.coinConfig
			})
		},
		onLoad({ coinid, type }) {
			this.coinid = coinid || '1';
			this.type = type || '0';
			this.getData();
		},
		methods: {
			// 初始化
			reset() {
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getData();
			},
			// 获取转让记录列表
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return;
				}
				this.isLoading = true;
				const { list, pageCount, success } = await GetBuyBackRecored({
					coinid: this.coinid,
					// type: 3,
					pageSize: this.pageSize,
					pageIndex: this.pageIndex
				});
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			}
		},
		onPullDownRefresh() {
			this.reset();
		},
		onReachBottom() {
			this.getData();
			console.log('触底了');
		}
	};
</script>

<style lang="scss">
	.li {
		padding: 27rpx 0;

		view+view {
			padding-top: 8rpx;
		}

		.head {
			text:nth-of-type(1) {
				font-size: 30rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			text:nth-of-type(2) {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}

		text {
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #97979f;
		}
	}

	.li+.li {
		border-top: 1px solid #eeeeee;
	}
</style>